<script lang="ts" setup>
import { ref, watch } from 'vue'
import { perDialogVisible, exitPersonalInfo } from "@/stores/page"
import { userName, userHeadShot, userId, userPhone, userBirthday, userGender, userInfoUpdate } from "@/stores/user"
import axios from 'axios'
import { ElMessage } from 'element-plus'
import type { UploadInstance } from 'element-plus'


watch(() => perDialogVisible, () => {
  if (!perDialogVisible.value) {
    exitPersonalInfo()
    type.value = 0
  }
},
  { deep: true }
)



const dialogVisible = ref(false)
const type = ref(0)


function edit() {
  type.value = 1;
}
function update() {
  axios({
    method: 'post',
    url: 'https://47.120.69.214:8787/user/update',
    data: {
      "id": userId.value,
      "name": userName.value,
      "birthday": userBirthday.value,
      "gender": userGender.value
    },
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
    console.log(userBirthday)
    ElMessage.success('修改成功')
    userInfoUpdate()
  })
    .catch(error => console.log(error))
  type.value = 0;
}

//上传头像
const uploadRef = ref<UploadInstance>()
function handleSuccess(file: File, response: any) {
  const formData = new FormData()
  formData.append('head', response.raw)
  formData.append('userId', userId.value)
  axios.post('https://47.120.69.214:8787/user/uploadHead', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
    .then(respose => userInfoUpdate())
    .catch(error => console.log(error))
}



</script>
<template>

  <el-dialog v-model="perDialogVisible" title="个人信息" width="500">
    <div class="demo-image__preview">
      <el-image style="width: 100px; height: 100px; left:-30%; border:solid 1px" :src="userHeadShot" :zoom-rate="1.2"
        :max-scale="7" :min-scale="0.2" fit="cover" :preview-src-list="[userHeadShot]" />
      <div v-if="type === 0">
        <el-upload ref="uploadRef" class="upload-demo" action="https://47.120.69.214:8787/user/uploadHead"
        :data="{ 'userId': userId }"
        name="head"
          :on-success="handleSuccess" :show-file-list="false" list-type="picture" accept="images">
          <template #trigger>
            <el-button type="success" style="margin-right:10%">更换头像</el-button>
          </template>
        </el-upload>
      </div>

    </div>
    <div style="margin-bottom:4%"></div>
    <el-scrollbar height="40vh">
      <div v-if="type === 0">
        <div class="scrollbar-demo-item">
          <div id="personalInfo">昵称: {{ userName }}</div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">ID: {{ userId }}</div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">电话号码: {{ userPhone }}</div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">生日: {{ userBirthday }}</div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">性别: {{ userGender }}</div>
        </div>
      </div>
      <div v-else>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">昵称:
            <el-input v-model="userName" style="width:15vw"></el-input>
          </div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">ID:
            <el-input v-model="userId" style="width:15vw; left:10%" disabled></el-input>
          </div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">电话号码:
            <el-input v-model="userPhone" style="width:13vw; left:5%" disabled></el-input>
          </div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">生日:
            <el-input v-model="userBirthday" type="date" style="width:15vw"></el-input>
          </div>
        </div>
        <div class="scrollbar-demo-item">
          <div id="personalInfo">性别:
            <el-select v-model="userGender" size="large" style="width: 240px">
              <el-option v-for="item in [{ label: '男', value: '男' }, { label: '女', value: '女' }]" :key="item.value"
                :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <div v-if="type === 0">
          <el-button type="primary" @click="edit()">编辑</el-button>
        </div>
        <div v-else>
          <el-button type="primary" @click="update()">确定</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img :src="userHeadShot" />
  </el-dialog>
</template>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

#personalInfo {
  font-size: 20px;
  margin-left: 10%
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 50px;
  margin: 10px;
  text-align: left;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: balck;
  margin-left: 8%;
  width: 23vw
}
</style>